<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/jqgrid/ui.jqgrid-bootstrap.css">
    <link rel="stylesheet" href="../../plugins/ztree/css/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../libs/jquery.min.js"></script>
    <script src="../../plugins/layer/layer.js"></script>
    <script src="../../libs/bootstrap.min.js"></script>
    <script src="../../libs/vue.min.js"></script>
    <script src="../../plugins/jqgrid/grid.locale-cn.js"></script>
    <script src="../../plugins/jqgrid/jquery.jqGrid.min.js"></script>
    <script src="../../plugins/ztree/jquery.ztree.all.min.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../js/echarts.js"></script>
    <script src="../../js/walden.js"></script>
    <script src="../../js/setdate.js"></script>
    <script src="../../libs/My97DatePicker/4.8/WdatePicker.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>授课情况</title>
    <style type="text/css">
        .leftChart{
            height: 500px;
            flex: 1.5
        }
        .rightChart{
            height: 500px;
            flex: 1.5
        }
        .pie{
            height: 200px;
            flex: 1.5
        }
    </style>
</head>
<body>
<div id="rrapp" v-cloak>
    <el-select
            v-model="collageValue"
            multiple
            collapse-tags
            size="small"
            style="margin-left: 20px;"
            placeholder="请选择部门">
        <el-option
                v-for="item in collageOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
    <el-select
            v-model="yearValue"
            multiple
            collapse-tags
            size="small"
            style="margin-left: 20px;width: 150px"
            placeholder="请选择学年">
        <el-option
                v-for="item in yearOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
    <el-select
            v-model="termValue"
            multiple
            collapse-tags
            size="small"
            style="margin-left: 20px;width: 150px"
            placeholder="请选择学期">
        <el-option
                v-for="item in termOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
    <el-select
            v-model="weekValue"
            multiple
            collapse-tags
            size="small"
            style="margin-left: 20px;width: 150px"
            placeholder="请选择教学周">
        <el-option
                v-for="item in weekOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
    <el-select
            v-model="dayValue"
            multiple
            collapse-tags
            size="small"
            style="margin-left: 20px;width: 150px"
            placeholder="请选择星期几">
        <el-option
                v-for="item in dayOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
    <el-select
            v-model="indexValue"
            multiple
            collapse-tags
            size="small"
            style="margin-left: 20px;width: 150px"
            placeholder="请选择第几节">
        <el-option
                v-for="item in indexOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
</div>
<div class="row">
    <div class="form-group col-sm-2" style="display: none" id="CollegeSelect">
        <select  class="form-control" id="College"  >
        </select>
    </div>
    <a class="btn btn-default" onclick="query()">查询</a>
</div>
<div class="row">
    <div id="multiSelect">
    </div>
</div>
<div class="row">
    <div class="form-group col-sm-2 set-paddingLeft">
        <input type="text" class="form-control" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})" id="startDate" name="startDate" placeholder="开始时间"/>
    </div>

    <div class="form-group col-sm-2">
        <input type="text" class="form-control" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})" id="endDate" name="endDate"  placeholder="结束时间"/>
    </div>
    <div class="btn-container">
        <span  class="normal-btn normal-color" onclick="setDate('1')">今日</span>
        <span  class="normal-btn normal-color" onclick="setDate('2')">本周</span>
        <span  class="normal-btn normal-color" onclick="setDate('3')">本月</span>
    </div>
</div>
<div class="row">
</div>
<div id="chartsContainer" style="height:500px;display: flex;flex-direction: row;justify-content: center;align-items: center;">
    <!--教师授课情况纵向比-->
    <div  class="leftChart" id="teacherAttendenceEcharts"></div>
</div>
<script>
	var vm = new Vue({
		el:'#rrapp',
		data:{
		  collageData:null,
		  yearData:null,
		  termData:null,
		  weekData:null,
		  dayData:null,
		  indexData:null,
		  collageValue:[],
		  yearValue:[],
		  termValue:[],
		  weekValue:[],
		  dayValue:[],
		  indexValue:[],
		  collageOptions:[],
		  yearOptions:[],
		  termOptions:[],
		  weekOptions:[],
		  dayOptions:[],
		  indexOptions:[]
		},
		mounted(){
			 $.ajax({
				url: baseURL + "/college/getAllcollege",
				data: {},
				success: function (r) {
					for (i = 0; i < r.list.length; i++) {
						var tempJson={
							'value':r.list[i].collegeName,
							'label':r.list[i].collegeName
						}
						vm.collageOptions.push(tempJson)
					}
				}
			});
			$.ajax({
				url: baseURL + "/term/getSchoolTerm",
				data: {},
				success: function (r) {
					for (i = 0; i < r.list.length; i++) {
						 var tempJson={
							'value':r.list[i].schoolAcademicYear,
							'label':r.list[i].schoolAcademicYear
						}
						vm.yearOptions.push(tempJson)
					}
				}
			 });
			 var listTerm=["1","2"];
			 for (i = 0; i < listTerm.length; i++) {
				var tempJson={
					'value':listTerm[i],
					'label':"第"+listTerm[i]+"学期"
				}
				this.termOptions.push(tempJson)
			 }
			 for (i = 1; i < 21; i++) {
				var tempJson={
					'value':i,
					'label':"第"+i+"周"
				}
				this.weekOptions.push(tempJson)
			 }
			 for (i = 1; i < 8; i++) {
			   var tempJson={
					'value':i,
					'label':"星期"+i
				}
				this.dayOptions.push(tempJson)
			 }
			 for (i = 1; i < 11; i+=2) {
				var tempJson={
					'value':i,
					'label':"第"+i+"节"
				}
				this.indexOptions.push(tempJson)
			 }
		},
		methods:{

		}
	});
	//*******************************v**u**e*********************************
    // var pie = echarts.init(document.getElementById('pie'),'walden');
    var teacherAttendenceEcharts = echarts.init(document.getElementById('teacherAttendenceEcharts'),'');
    //饼状图
    var option = {
        tooltip : {
            trigger: 'axis'
        },
        toolbox: {
            show : true,
            y: 'bottom',
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        legend: {
            data:['相符','不相符']
        },
        grid: {
            y2: 140
        },
        xAxis : [
            {
                type : 'category',
                splitLine : {show : false},
                data : ['周一','周二','周三','周四','周五','周六','周日'],
                axisLabel:{
                    interval:0,//横轴信息全部显示
                    rotate:-30,//-30度角倾斜显示
                }
            }
        ],
        yAxis : [
            {
                type : 'value',
                position: 'left'
            }
        ],
        series : [
            {
                name:'相符',
                type:'bar',
                barWidth: '60%',
                data:[10, 52, 200, 334, 390, 330, 220]
            }
        ]
    };
    //饼状图
    var pieOption  = {
        title : {
            text: '教学进度相符率各学院对比图',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            // orient: 'vertical',
            // top: 'middle',
            bottom: 10,
            left: 'center',
            data: ['相符','不相符']
        },
        series : [
            {
                type: 'pie',
                radius : '65%',
                center: ['50%', '50%'],
                selectedMode: 'single',
                data:[
                    {value:335, name:'优'},
                    {value:310, name:'良'},
                    {value:234, name:'差'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    window.onresize = function(){
        teacherAttendenceEcharts.resize()
    }
    $(function () {
        $.ajax({
            url: baseURL + "/college/getAllcollege",
            data: {},
            success: function (r) {
                $("#option").append("<option value=''>全校</option>");
                for (i = 0; i < r.list.length; i++) {
                    var tname = r.list[i].collegeName;
                    var tid = r.list[i].collegeName;
                    $("#option").append("<option value='" + tid + "'>" + tname + "</option>");
                }
            }
        });
        setDate('3')
    })
     function goString(data){
		var temp=""
		for(let i in data){
			if(i==data.length-1){
				temp+=('\''+data[i]+'\'')
			}else{
				temp+=('\''+data[i]+'\'')+','
			}
		}
		return temp
	}
    function query()
    {
        vm.collageData=goString(vm.collageValue);
        vm.yearData=goString(vm.yearValue);
        vm.termData=goString(vm.termValue);
        vm.weekData=goString(vm.weekValue);
        vm.dayData=goString(vm.dayValue);
        vm.indexData=goString(vm.indexValue);
        $.ajax({
            url: baseURL + "allSchoolEcharts/teacherProgressOfCollegeEcharts",
            data: {
                "collegeName":vm.collageData,
                "academicYear":vm.yearData,
                "academicTerm":vm.termData,
                "academicWeek":vm.weekData,
                "academicDay":vm.dayData,
                "academicIndex":vm.indexData,
                "startDate":$("#startDate").val(),
                "endDate":$("#endDate").val()
            },
            success: function (r) {
                // pieOption.series[0].data=r.teacherAttendancePie;
                // pie.setOption(pieOption);

                option.xAxis[0].data=r.college.xData;
                option.series[0].data=r.college.seriesData;
                var re=getPiechuqu(r.CoincidenceRate)
                option.series.push(re);
                teacherAttendenceEcharts.setOption(option);
            }
        });

    }
    function getPiechuqu(data)
    {
        var oo={
            name:'出勤情况',
            type:'pie',
            tooltip : {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            center: [1220,100],
            radius : [0, 50],
            itemStyle :　{
                normal : {
                    labelLine : {
                        length : 20
                    }
                }
            },
            data:data
        };
        return oo;
    }
</script>
</body>
</html>